<template>
  <h2>{{route.meta.title}}</h2>
  <el-upload 
  :action=" host + '/uploadPicture'" 
  list-type="picture-card"
  name="picture_src"
  method="post"
  :on-success="success"
  >
   <img v-if="dialogImageUrl" class="el-upload-list__item-thumbnail" :src="dialogImageUrl" alt="!" />
    <el-icon><Plus /></el-icon>
  </el-upload>


</template>

<script setup>

import { onMounted,reactive,ref } from 'vue'
import { useRoute } from 'vue-router'
// 路由
const route = useRoute()
const host = ref("http://localhost:3010")
let dialogImageUrl = ref("")

const success = (event) => {
  if(event.data.length>0) {
    console.log(event.data[0].picture_src);
    dialogImageUrl = 'http://localhost:3010/images/' + event.data[0].picture_src
  }
}
</script>

<style lang="scss" scoped>
h2 {
  margin: 0;
  font-size: 18px;
}
.el-upload {
  margin-top: 1rem;
}
</style>